<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>文件管理</el-breadcrumb-item>
    <el-breadcrumb-item>回收站管理</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 内容区域 -->
  <el-card class="box-card">
    <!-- 搜索条件 -->
    <el-row :gutter="15">
      <el-col>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入文件名">
              <el-button slot="append" icon="el-icon-search" @click="searchComments"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="info" @click="clearSearch">清空</el-button>
            <el-button type="primary" @click="searchComments">搜索</el-button>
          </el-col>
        </el-row>

        <el-table ref="multipleTable" :data="commentList" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="content" label="文件名" width="300"></el-table-column>
          <el-table-column prop="status" label="大小"> </el-table-column>
          <el-table-column prop="status" label="删除时间"> </el-table-column>
          <el-table-column label="有效时间"> </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalComments"
                       :current-page="queryParams.pageNum" :page-sizes="[1, 5, 10]"
                       :page-size="queryParams.pageSize"
                       @size-change="handleSizeChange" @current-change="handlePageChange"/>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import router from '@admin/router/index.js'
import {inject, ref} from 'vue';
import axios from '@admin/utils/request.js';

let $message = inject('$message');

// 注入全局属性
let $confirm = inject('$confirm');

// 查询参数
const queryParams = ref({
  content: '',
  status: '',
  pageNum: 1,
  pageSize: 5
});

let pageInfo = ref({});
let selectedRows = ref([]);

// 查询结果
const commentList = ref([]);
const totalComments = ref(0);

// 获取评论列表
const searchComments = (status, pageNum) => {
  if (status && pageNum) {
    queryParams.value.status = status;
    queryParams.value.pageNum = pageNum;
  }
  axios.post('/comments/search', queryParams.value)
      .then(response => {
        pageInfo.value = response;
        commentList.value = pageInfo.value.list;
        totalComments.value = pageInfo.value.total;
        queryParams.value.pageNum = pageInfo.value.pageNum;
      }).catch(error => {
    console.log(error);
  });
};

/* 2: 分页 */
const handleSizeChange = function (newPageSize) {
  queryParams.value.pageNum = 1;
  queryParams.value.pageSize = newPageSize;
  searchComments(queryParams.value.status);
};
const handlePageChange = function (newPageNum) {
  queryParams.value.pageNum = newPageNum;
  searchComments(queryParams.value.status);
};

// 清空搜索条件
const clearSearch = function () {
  queryParams.value.content = '';
  queryParams.value.status = '';
  searchComments();
};

// 添加评论
const addComment = function () {
  // 这里可以跳转到添加评论的页面
  router.push('/home/addcomment');
};

// 删除选中的评论
const deleteSelectedComments = function () {
  if (selectedRows.value.length === 0) {
    $message.warning('请至少选择一条记录');
    return;
  }
  $confirm('此操作将永久删除选中的评论, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const ids = selectedRows.value.map(row => row.id);
    axios.delete('/comments/delete', {
      data: ids
    })
        .then(() => {
          $message.success('删除成功');
          searchComments();
        }).catch(error => {
      $message.error('删除失败');
    });
  }).catch(() => {
    $message.info('已取消删除');
  });
};

// 通过评论
const approveComment = function (id) {
  axios.post('/comments/update', {id, status: '已通过'})
      .then(() => {
        $message.success('审核通过');
        searchComments();
      }).catch(error => {
    console.error(error);
    $message.error('审核失败');
  });
};

// 拒绝评论
const rejectComment = function (id) {
  axios.post('/comments/update', {id, status: '已拒绝'})
      .then(() => {
        $message.success('拒绝成功');
        searchComments();
      }).catch(error => {
    console.error(error);
    $message.error('拒绝失败');
  });
};

// 处理表格选择变化
const handleSelectionChange = function (val) {
  selectedRows.value = val;
};

searchComments();

</script>